<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>文化江北</title>
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <link rel="stylesheet" href="../../css/media.css" />
    <link rel="stylesheet" href="../../css/common.css" />
    <link rel="stylesheet" href="../../css/swiper.css">
    <style>
        .topDiv{
            width: 100%;
            height: 3.24rem;
        }
        .main {
            background-color: #fff;
            width: 100%;
        }
        .main .box {
            width: 33.3333333%;
            border-right: 1px solid #D9D9D9;
            border-bottom: 1px solid #D9D9D9;
            float: left;
            box-sizing: border-box;
            position: relative;   /*父元素给相对定位*/
        }
        .main .box:nth-child(3n){
            border-right: none
        }
        .main .box .content {
            　　position: absolute;    /*子元素给绝对定位*/
            　　width: 100%;
            　　height: 100%;
        }
        .main .box .content .circle{
            width: 1.2rem;
            height: 1.2rem;
            line-height: .9rem;
            text-align: center;
            border-radius: 50%;
            margin: .52rem auto .28rem;
            color: #fff;
        }
        .main .box .content .circle i{
            font-size: .52rem
        }
        .main .box .content .title{
            font-size: .24rem;
            color: #666;
            text-align: center;
            margin-bottom: .26rem;
        }
        .bg1{
            background: #23BDBF;
        }
        .bg2{
            background: #41A6F4;
        }
        .bg3{
            background: #51CC5D;
        }
        .bg4{
            background: #F09621;
        }
        .bg5{
            background: #B97EFF;
        }
        .topDiv .tit{
			position: absolute;
			bottom: 0;
			line-height: .62rem;
			padding-left:.34rem;
			color: #fff;
			font-size: .28rem;
			width:100%;
			height: .62rem;
			background:rgba(0,0,0,0.5);
			box-sizing: border-box;
		}
		.swiper-pagination-bullet{
			background: #939393;
			opacity: 1;
		}
		.swiper-pagination-bullet-active{
			background: #2CA6E0;
		}
		.swiper-container-horizontal>.swiper-pagination-bullets{
			text-align: right;
			line-height: .1rem;
			height: .62rem;
			bottom: 0;
			padding-right: .2rem;
			box-sizing: border-box;
		}
    </style>
</head>
<body>
    <!--<div class="topDiv">-->
    	<div class="swiper-container topDiv">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="javascript:void(0);">
						<img src="../../img/literary_banner.png"/>
						<div class="tit">书香江北</div>
					</a>
				</div>
				<div class="swiper-slide">
					<a href="javascript:void(0);">
						<img src="../../img/hot_banner.png"/>
						<div class="tit">书香江北</div>
					</a>
				</div>
				<div class="swiper-slide">
					<a href="javascript:void(0);">
						<img src="../../img/literary_banner.png"/>
						<div class="tit">书香江北</div>
					</a>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
        <!--<img src="../../img/literary_banner.png" />
    </div>-->
    <div class="main">
        <div class="box">
            <div class="content">
                <div class="circle bg1">
                    <i class="iconfont icon-piaowu"></i>
                </div>
                <div class="title">票务</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg2">
                    <i class="iconfont icon-changdi-"></i>
                </div>
                <div class="title">场馆</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg3">
                    <i class="iconfont icon-peixun"></i>
                </div>
                <div class="title">培训</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg4">
                    <i class="iconfont icon-wenhua"></i>
                </div>
                <div class="title">文化信息</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg1">
                    <i class="iconfont icon-fabu-"></i>
                </div>
                <div class="title">发布</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg5">
                    <i class="iconfont icon-xingzhuang"></i>
                </div>
                <div class="title">传统文化</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg5">
                    <i class="iconfont icon-xinxingwenhua"></i>
                </div>
                <div class="title">新兴文化</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg2">
                    <i class="iconfont icon-wenhuake"></i>
                </div>
                <div class="title">文创天地</div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="circle bg3">
                    <i class="iconfont icon-wenhuachangguan"></i>
                </div>
                <div class="title">文化小镇</div>
            </div>
        </div>
    </div>
    <script src="../../js/swiper.min.js"></script>
	<script type="text/javascript">
		var mySwiper = new Swiper('.swiper-container', {
//			autoplay: true,//可选选项，自动滑动
			pagination: {
				el: '.swiper-pagination',
			},
		})  
	</script>
</body>
</html>